<template>
  <div class="settings-container">
    <h2>系统设置</h2>
    <div class="settings-card">
      <div class="setting-item">
        <label>识别页面背景颜色：</label>
        <div class="color-controls">
          <input 
            type="color" 
            v-model="bgColor" 
          />
          <div class="color-preview" :style="{ backgroundColor: bgColor }">
            预览
          </div>
          <button 
            class="save-btn" 
            @click="updateSettings"
            :disabled="isSaving"
          >
            {{ isSaving ? '保存中...' : '保存设置' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api/config'

const bgColor = ref('#ffffff')
const isSaving = ref(false)

// 获取当前设置
const fetchSettings = async () => {
  try {
    const response = await api.get('http://172.31.53.239:5000/api/settings/current')
    if (response.data.prediction_bg_color) {
      bgColor.value = response.data.prediction_bg_color
    }
  } catch (error) {
    console.error('获取设置失败:', error)
    alert('获取设置失败，请刷新页面重试')
  }
}

// 更新设置
const updateSettings = async () => {
  if (isSaving.value) return
  
  isSaving.value = true
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      alert('请先登录')
      return
    }

    const response = await api.post(
      'http://172.31.53.239:5000/api/settings',
      {
        prediction_bg_color: bgColor.value
      },
      {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }
    )
    
    if (response.data.message === '设置已更新') {
      alert('设置已更新')
    }
  } catch (error) {
    console.error('更新设置失败:', error)
    if (error.response) {
      if (error.response.status === 401) {
        alert('请先登录')
      } else if (error.response.status === 403) {
        alert('需要管理员权限')
      } else {
        alert(error.response.data.message || '更新设置失败')
      }
    } else {
      alert('更新设置失败，请检查网络连接')
    }
  } finally {
    isSaving.value = false
  }
}

onMounted(() => {
  fetchSettings()
})
</script>

<style scoped>
.settings-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.settings-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.setting-item label {
  min-width: 150px;
  color: #666;
}

.color-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.color-preview {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
  min-width: 100px;
  text-align: center;
  cursor: default;
}

input[type="color"] {
  width: 50px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.save-btn {
  padding: 0.5rem 1rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #3aa876;
}

.save-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style> 